<script setup lang="ts">
import { useContainer } from 'element-plus/es/components/splitter/src/hooks/useContainer.mjs'
import TheWelcome from '../components/TheWelcome.vue'
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter'
const router = useRouter()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const store = useCounterStore()

const tung = () => {
  router.push('/')
}
</script>

<style>
.el-header,
.el-container,
.el-main{
  border: 1px solid #6b6868;
}

</style>
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: aqua;">

        用户名：{{ store.userinfo.userName }} | 昵称：{{ store.userinfo.nickName }} | 角色：{{ store.userinfo.roleName }}

        <el-button style="margin-left: 1200px;margin-top: 12px;" type="danger" @click="tung()">退出登录</el-button>


      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#137fec" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" router>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>权限管理</span>
              </template>
              <el-menu-item index="/AddPermission">添加权限</el-menu-item>
              <el-menu-item index="/AddPermission">编辑权限</el-menu-item>
              <el-menu-item index="/GetPermission">管理权限</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>角色管理</span>
              </template>
              <el-menu-item index="/AddRole">添加角色</el-menu-item>
              <el-menu-item index="/UpdateRole">编辑角色</el-menu-item>
              <el-menu-item index="/GetRole">管理角色</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/AddUser">添加用户</el-menu-item>
              <el-menu-item index="/UpdateUser">编辑用户</el-menu-item>
              <el-menu-item index="/GetUser">管理用户</el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>